<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta th:include="common/commons :: layui"/>
    <title>绑定微信</title>
    <style type="text/css">
        .layui-form-pane .layui-form-label {
            width: 200px;
        }

        .layui-form-pane .layui-input-block {
            margin-left: 200px;
        }

        .layui-table-fixed-r td {
            height: 68px !important;
        }

        .layui-table-fixed-r th {
            height: 68px !important;
        }

        .layui-table img {
            max-width: 68px;
            min-height: 68px;
        }

        .laytable-cell-3-wx_headimg, .laytable-cell-1-wx_headimg, .laytable-cell-2-wx_headimg, .laytable-cell-3-wx_headimg, .laytable-cell-4-wx_headimg, .laytable-cell-5-wx_headimg, .laytable-cell-6-wx_headimg, .laytable-cell-7-wx_headimg, .laytable-cell-8-wx_headimg, .laytable-cell-9-wx_headimg, .laytable-cell-10-wx_headimg, .laytable-cell-11-wx_headimg, .laytable-cell-12-wx_headimg, .laytable-cell-13-wx_headimg, .laytable-cell-14-wx_headimg {
            width: 68px !important;
            padding: 0 !important;
            height: 68px !important;
            line-height: 68px !important;
        }
    </style>
</head>
<body style="text-align:center">
<div class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" id="name"/>
        </div>
        <div class="layui-input-inline">
            <input class="layui-btn layui-btn-normal  " type="button" id="search" value="查询" onclick="query()"/>
        </div>
    </div>
</div>
<div class="layui-row">
    <table id="bindWxTable" lay-filter="bindWxFilter"></table>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="bindWx">绑定</a>
</script>

<script type="text/javascript" th:inline="javascript">

    let managerUser;
    $(function () {
        managerUser = [[${managerUser}]];
    });

    layui.use('table', function () {
        var table = layui.table;
        table1 = table.render({
            elem: '#bindWxTable',
            method: 'post',
            contentType: "application/json",
            url: ctx + "/public-user/queryToBind",
            title: '微信用户列表',
            page: true,
            request: {
                pageName: 'currentPage',
                limitName: 'pageSize'
            },
            limit: 10,
            limits: [10, 15, 20],
            height: 'full-120',
            cols: [
                [
                    {
                        title: '序号', width: 50, templet: function (obj) {
                            return obj.LAY_INDEX
                        }
                    },
                    {field: 'openId', align: 'center', title: '微信openId', width: '270'},
                    {field: 'name', align: 'center', width: '120', title: '姓名'},
                    {field: 'phone', align: 'center', width: '200', title: '手机号'},
                    {field: 'age', align: 'center', title: '年龄', width: '80'},
                    {field: 'communityName', align: 'center', title: '小区', width: '180'},
                    {
                        field: 'imgUrl',
                        align: 'center',
                        width: '150',
                        title: '头像',
                        templet: function (d) {
                            return '<div><img src=' + d.imgUrl +'></div>'
                        },
                        // templet: '<div><img src="{{ d.imgUrl}}"></div>',
                        style: 'height:78px;width:78px;line-height:78px!important;'
                    },
                    {field: 'createTime', align: 'center', width: '180', title: '创建时间'},
                    {title: '操作', width: '120', align: 'center', toolbar: '#barDemo'}
                ]
            ]
        });

        //监听行工具事件
        table.on('tool(bindWxFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'bindWx') {
                bindWx(data)
            }
        });
    });

    //查询
    function query() {
        const condition = {name: $("#name").val()}
        table1.reload({
            where: {
                "condition": condition
            }
        });
    }

    function bindWx(data) {
        $.ajax({
            type: 'post',
            url: ctx + '/public-user/bindToWx',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({"publicUserId": data.id, "managerUser": managerUser.id}),
            success: function (data) {
                if (data) {
                    msg.success("绑定成功");
                    change1();
                } else {
                    msg.error(data.resdesc)
                }
            }
        })
    }

</script>
</body>
</html>